<template>
  <div class="content">
    <div class="title">
      <div class="op"></div>
      成员信息
    </div>
    <!-- <div class="btn">
      <a-button>取消</a-button>
      <a-button type="primary">编辑</a-button>
      <a-button type="primary" @click="addData">新增</a-button>
    </div> -->
    <a-table rowKey="id" ref="dragTable" :columns="columnsModel" :data-source="dataModel" bordered :pagination="false">
      <template slot="action" slot-scope="text, record">
        <a style="margin-right: 10px" @click="edit(record)">编辑</a>
        <a-popconfirm v-if="dataModel.length" title="是否确认删除？" @confirm="() => onDelete(record.key)">
          <a style="color: red" href="javascript:;">删除</a>
        </a-popconfirm>
      </template>
      <template slot="footer" slot-scope="currentPageData">
        <div class="add">
          <a @click="addData('add')">新增</a>
        </div>
      </template>
    </a-table>
    <div class="btn">
      <a-button @click="previous"> 上一步</a-button>
      <a-button type="primary" @click="nextTab()"> 下一步</a-button>
    </div>
    <a-modal v-model="visible" title="新增" @ok="handleOk">
      <a-form :label-col="{ span: 8 }" :wrapper-col="{ span: 12 }">
        <a-form-item label="姓名">
          <a-input v-model="diaData.name" />
        </a-form-item>
        <a-form-item label="工作职责">
          <a-input v-model="diaData.work" />
        </a-form-item>
        <a-form-item label="投入人月">
          <a-input v-model="diaData.Inputmonth" />
        </a-form-item>
        <a-form-item label="加入时间">
          <a-date-picker v-model="diaData.atime"  @change="onStartChange" />
        </a-form-item>
        <a-form-item label="离开时间">
          <a-date-picker v-model="diaData.etime"  @change="onEndChange" />
          <!-- <a-input v-model="diaData.etime" /> -->
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>
<script>
import Sortable from 'sortablejs'
import {getMember,addMember,updateMember,deleteMember } from '@/api/projectInitApply'
export default {
  props: {
    id: {
      // type: number,
      default: null
    }
  },
  data() {
    return {
      type: '',
      visible: false,
      sortable: null, //拖拽实列
      diaData: {
      },
      dataModel: [
        // {
        //   key: '100987',
        //   name: '张三',
        //   work: '后端研发',
        //   month: '0.5月',
        //   joinTime: '2023年6月29日11:17:42',
        //   leaveTime: '2023年8月29日11:17:42',
        // },
        // {
        //   key: '223314',
        //   name: '李四',
        //   work: '后端研发',
        //   month: '0.5月',
        //   joinTime: '2023年6月29日11:17:42',
        //   leaveTime: '2023年8月29日11:17:42',
        // },
        // {
        //   key: '33213',
        //   name: '王五',
        //   work: '后端研发',
        //   month: '0.5月',
        //   joinTime: '2023年6月29日11:17:42',
        //   leaveTime: '2023年8月29日11:17:42',
        // },
        // {
        //   key: '412313',
        //   name: '分散片',
        //   work: '后端研发',
        //   month: '0.5月',
        //   joinTime: '2023年6月29日11:17:42',
        //   leaveTime: '2023年8月29日11:17:42',
        // },
        // {
        //   key: '512312312',
        //   name: '巍峨',
        //   work: '后端研发',
        //   month: '0.5月',
        //   joinTime: '2023年6月29日11:17:42',
        //   leaveTime: '2023年8月29日11:17:42',
        // },
      ],
      columnsModel: [
        {
          title: '序号',
          dataIndex: 'index',
          customRender: (text, record, index) => {
            if (index > 10) {
              return index + 1
            } else {
              return `0${index + 1}`
            }
          },
        },
        {
          title: '姓名',
          dataIndex: 'name',
          scopedSlots: { customRender: 'name' },
        },
        {
          title: '工作职责',
          dataIndex: 'work',
        },
        {
          title: '投入人月',
          dataIndex: 'month',
        },
        {
          title: '加入时间',
          dataIndex: 'joinTime',
        },
        {
          title: '离开时间',
          dataIndex: 'leaveTime',
        },
        {
          title: '操作',
          dataIndex: 'action',
          scopedSlots: { customRender: 'action' },
        },
      ],
    }
  },
  mounted() {
    //调用
    this.$nextTick(() => {
      // this.id = '1742369449645895682';
      let projectId;
      if(this.id){
        projectId = this.id
      }else{
        projectId = this.$route.query.id
      }
      getMember({
      projectApplicationId: projectId
    }).then(res=>{
      console.log(res);
      this.dataModel = res.data.map((e) => {
        return {
          key: e.id,
          name: e.name,
          work: e.responsibilities,
          month: e.inputMonth,
          joinTime: e.atime,
          leaveTime: e.etime,
        }
    });
    }),
    this.setDrag();
    })
  },
  methods: {
    addData() {
      this.diaData = {};
      this.type = 'add'
      this.visible = true
    },
    getMember(){
      let projectId;
      if(this.id){
        projectId = this.id
      }else{
        projectId = this.$route.query.id
      }
      getMember({
      projectApplicationId: projectId
    }).then(res=>{
      this.dataModel = res.data.map((e) => {
        return {
          key: e.id,
          name: e.name,
          work: e.responsibilities,
          month: e.inputMonth,
          joinTime: e.atime,
          leaveTime: e.etime,
        }
    })

    })
    },

    edit(item) {
      this.type = 'edit'
      this.diaData = item
      this.diaData.Inputmonth = item.month
      this.diaData.atime = item.joinTime
      this.diaData.etime = item.leaveTime
      this.diaData.id = item.key
      this.visible = true
      console.log(123,item);


    },
    onStartChange(date, dateString) {
      this.diaData.atime = dateString;
      console.log(date, this.diaData.atime);
    },
    onEndChange(date, dateString) {
      this.diaData.etime = dateString;
      console.log(date, this.diaData.etime);
    },
    handleOk() {
      this.diaData.mainId = !this.id?this.$route.query.id:this.id;
      console.log(3333,this.diaData.mainId);
       if(this.type == 'add'){
        console.log(this.diaData);
        let data = {
          mainId : this.diaData.mainId,
          unit : this.diaData.unit,
          name: this.diaData.name,
          inputMonth: this.diaData.Inputmonth,
          responsibilities : this.diaData.work,
          atime : this.diaData.atime,
          etime: this.diaData.etime,
        }
        console.log(44444,data);
        // this.dataModel.push({...this.diaData});
        // console.log(1111,this.dataModel);

        addMember(data).then(res=>{
          this.getMember();
        })
      }else if(this.type =='edit'){
        console.log(this.diaData);
        let data = {
          mainId :this.diaData.mainId,
          unit : this.diaData.unit,
          id: this.diaData.id,
          name: this.diaData.name,
          inputMonth: this.diaData.Inputmonth,
          responsibilities : this.diaData.work,
          atime : this.diaData.atime,
          etime: this.diaData.etime,
        }
        updateMember(data).then(res=>{
          this.getMember();
        })
      }
      this.visible = false
      this.diaData = ''

    },
    onDelete(key) {
      deleteMember({
        id:key
      }).then(res=>{
        this.getMember()
      })
    },
    nextTab(isTriggerExternal) {
      if(isTriggerExternal){
        this.$router.push({ path: '/initManage' })
      }else this.$emit('next', 2)
    },
    previous() {
      this.$emit('previous', 0)
    },
    // 设置拖拽
    setDrag() {
      // 获取元素
      const el = this.$refs.dragTable.$el.querySelectorAll('.ant-table-body > table > tbody')[0]
      this.sortable = Sortable.create(el, {
        ghostClass: 'sortable-ghost', // Class name for the drop placeholder,
        setData: function (dataTransfer) {
          dataTransfer.setData('Text', '')
        },
        // 拖动结束时回调
        onEnd: (evt) => {
          const targetRow = this.dataModel.splice(evt.oldIndex, 1)[0]
          // 更新到表格数据
          this.dataModel.splice(evt.newIndex, 0, targetRow)
        },
      })
    },

    // 在改动数据的方法中调用
    add() {
      this.$nextTick(() => this.setDrag())
    },
  },
}
</script>
<style lang="less" scoped>
::v-deep .ant-table-bordered .ant-table-tbody > tr > th:first-child {
  background-color: red; /* 这里设置了背景色 */
}
.add {
  width: 100%;
  display: flex;
  justify-content: center;
}
.title {
  height: 30px;
  display: flex;
  align-items: center;
  .op {
    height: 20px;
    width: 5px;
    background: #0084ff;
    margin-right: 10px;
  }
}
.content {
  height: 100%;
  width: 100%;
  padding: 10px 20px;
  .btn {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    margin: 10px 0;
    button {
      margin-right: 8px;

    }
  }
}
th.column-money,
td.column-money {
  text-align: right !important;
}
</style>
